<script setup>
import { onMounted } from 'vue';

// 初始化地图函数
function initMap() {
  // 百度地图API功能
  var map = new BMapGL.Map("l-map"); // 创建Map实例
  map.centerAndZoom("天津滨海国际机场", 13);
  map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
}

// 在组件挂载后初始化地图
onMounted(() => {
  initMap();
});
</script>

<template>
  <div class="all">
    <div class="main">
      <div class="radius">
        <div id="l-map"></div>
        <div id="r-result"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#l-map {
  height: 1100px;
  width: 100%;
}
#r-result {
  width: 100%;
}
.all {
  background-color: #eeeeff;
}
.main {
  width: 1150px;
}
.radius {
  margin-top: 20px;
  width: 100%;
  height: 20%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
}
</style>
